<template>
  <view class="goods-navs">
    <view @click="wishlists"><uni-icons :type="!in_wishlist ? 'heart' : 'heart-filled'" size="30"></uni-icons></view>
    <view :class="['btn-wrap', !props.sku.quantity ? 'disabled' : '']">
      <view class="btn" @click="addToCart(false)">{{ $t('product.product_add_cart') }}</view>
      <view class="btn btn-black" @click="addToCart(true)">{{ $t('product.product_buy_now') }}</view>
    </view>
  </view>
</template>

<script setup>
const { proxy } = getCurrentInstance()
import { t } from '@/locale/index'
const props = defineProps({
  sku: {
    type: Object,
    default: null
  },
  in_wishlist: {
    type: Number,
    default: false
  },
  id: {
    type: Number,
    default: null
  }
})
// let ssss = toRef(props, 'in_wishlist')
const in_wishlist = ref(props.in_wishlist)

const emit = defineEmits(['addToCart'])

// 加入购物车
const addToCart = (buyNow) => {
  emit('addToCart', buyNow)
}

const wishlists = () => {
  const method = in_wishlist.value ? 'del' : 'post'
  const url = in_wishlist.value ? `wishlists/${in_wishlist.value}` : 'wishlists'
  const _data = !in_wishlist.value ? {product_id: props.id} : null
  if (!proxy.$util.isLogin()) {
    proxy.$util.msg(t('common.login_first'))
    uni.setStorageSync('login_after_url', '/pages/product/product?id=' + props.id)
    uni.navigateTo({
      url: '/pages/account/login/login'
    })
    return;
  }

  proxy.$http[method](url, _data).then((res) => {
    if (method === 'post') {
      in_wishlist.value = res.data.id
      proxy.$util.msg({title: t('common.add_success')})
    } else{
      proxy.$util.msg({title: t('common.remove_success')})
      in_wishlist.value = 0
    }
  })
}
</script>

<style lang="scss" scoped>
.goods-navs {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 999;

  .btn-wrap {
    display: flex;
    align-items: center;
    flex: 1;
    padding-right: 20px;
    margin-left: 15px;
    position: relative;

    &.disabled {
      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        opacity: 0.6;
        z-index: 9;
      }
    }

    .btn {
      width: 50%;
      border: 1px solid $primary;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30rpx;
      font-weight: bold;
      &:active {
        background-color: #eee;
      }

      &:last-of-type {
        margin-left: 10px;
      }

      &.btn-black {
        background-color: #000;
        color: #fff;
        border-color: #000;

        &:active {
          background-color: #333;
        }
      }
    }
  }
}
</style>
